import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.less'
import {
    BankOutlined,
    RobotOutlined,
    ContainerOutlined,
    ShoppingOutlined,
    ShopOutlined,
    SaveOutlined,
    SignatureOutlined,
} from '@ant-design/icons';
import { Menu } from 'antd';
import logo from '@/assets/imgs/logo.png'

const AppNav = () => {
    // 路由跳转
    let navigate = useNavigate();
    // 状态管理
    const [current, setCurrent] = useState('home');
    const [openKeys, setOpenKeys] = useState([]);

    const items = [
        { key: '', icon: <BankOutlined />, label: '首页' },
        {
            key: 'account', icon: <RobotOutlined />, label: '用户管理',
            children: [
                { key: 'accountList', label: '账号列表' },
                { key: 'accountAdd', label: '添加账号' },
                { key: 'accountCenter', label: '个人中心' },
                { key: 'accountEdit', label: '修改密码' },
            ]
        },
        {
            key: 'goods', icon: <ShoppingOutlined />, label: '商品管理',
            children: [
                { key: 'goodsList', label: '商品列表' },
                { key: 'goodsAdd', label: '商品添加' },
                { key: 'goodsType', label: '商品分类' },
            ]
        },
        {
            key: 'orderList',
            label: '订单管理',
            icon: <ContainerOutlined />
        },
        {
            key: 'shopInfo',
            label: '店铺管理',
            icon: <ShopOutlined />,
        },
        {
            key: 'statistics',
            label: '统计数据',
            icon: <SignatureOutlined />,
            children: [
                { key: 'goosStatistics', label: '商品统计' },
                { key: 'orderStatistics', label: '订单统计' },
            ],
        },
        {
            key: 'auth',
            label: '权限管理',
            icon: <SaveOutlined />,
            children: [
                { key: 'permissionInfo', label: '权限管理' },
                { key: 'rolePermission', label: '角色管理' },
            ],
        },
    ];

    const [collapsed] = useState(false);

    const change = (key) => {
        navigate(key);
        setCurrent(key);
        // 存储当前选中的菜单项到localStorage
        sessionStorage.setItem('selectedMenu', key);
    }

    //只展示一个子菜单
    const onOpenChange = (keys) => {
        const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);//找到新打开的key
        if (latestOpenKey) {
            setOpenKeys([latestOpenKey]);
        } else {
            setOpenKeys([]);
        }
        // 存储当前展开的子菜单到localStorage
        sessionStorage.setItem('openMenu', latestOpenKey || ''); // 如果latestOpenKey为空，则存储空字符串
    };
    useEffect(() => {
        setCurrent(sessionStorage.getItem('selectedMenu')? sessionStorage.getItem('selectedMenu') : '');
        setOpenKeys(sessionStorage.getItem('openMenu')? [sessionStorage.getItem('openMenu')] : []);
    },[])
    return (
        <>
            <div className='title'>
                <img src={logo} alt="" />
                <div>外卖管理系统</div>
            </div>
            <Menu
                selectedKeys={[current]}
                openKeys={openKeys}
                mode="inline"
                theme="dark"
                inlineCollapsed={collapsed}
                items={items}
                onSelect={({ key }) => change(key)}
                onOpenChange={onOpenChange}
            />
        </>
    );
};

export default AppNav;
    